<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

	<a4j:form id="payOrderQueryForm" styleClass="trn_form">
		
		<a4j:outputPanel id="msgContainer" ajaxRendered="true">
			<h:messages globalOnly="false" errorClass="msgError" styleClass="message" infoClass="msgInfo" />
		</a4j:outputPanel>
		<a4j:outputPanel id="payOrderQueryHeadPanel">
			<div id="Form_Table">
				<div id="Form_Row">
					<div class="form_fields">
						<s:label for="pPayOrderQuerySupplier">Proveedor:</s:label>
						<h:selectOneMenu
							styleClass="input"
							converter="#{supplierConverter}"
							value="#{trnPaymentOrder.paymentOrderQueryHead.supplierData}"
							id="pPayOrderQuerySupplier" >
							<a4j:support event="onchange" />
							<s:selectItems 
								value="#{withinHolder.supplierList()}" 
								var="supp"
								label="#{convertAssist.getSupplierName(supp.id)}"
								noSelectionLabel="Proveedor">
							</s:selectItems>
						</h:selectOneMenu>
						<div id="pPayOrderQuerySupplierMsg" class="inactiveMsg"></div>
					</div>	
						
					<div class="form_fields">
						<s:label for="pPayOrderQuerySearchStartDate">Fecha Ini Busqueda:</s:label>
						<rich:calendar 
							inputClass="input"
							id="pPayOrderQuerySearchStartDate"
							value="#{trnPaymentOrder.paymentOrderQueryHead.searchStartDate}" 
							datePattern="dd/MM/yy"
							buttonClass="field_btn">
							<a4j:support event="onchange"></a4j:support>
						</rich:calendar>
						<div id="pPayOrderQuerySearchStartDateMsg" class="inactiveMsg"></div>	
					</div>
					<div class="form_fields">
						<s:label for="pPayOrderQuerySearchEndDate">Fecha Fin Busqueda:</s:label>
						<rich:calendar 
							inputClass="input"
							id="pPayOrderQuerySearchEndDate"
							value="#{trnPaymentOrder.paymentOrderHead.searchEndDate}" 
							datePattern="dd/MM/yy"
							buttonClass="field_btn">
							<a4j:support event="onchange"></a4j:support>
						</rich:calendar>
						<div id="pPayOrderQuerySearchEndDateMsg" class="inactiveMsg"></div>	
						<a4j:commandButton
							action="#{trnPaymentOrder.retrievesPaymentOrders(trnPaymentOrder.paymentOrderQueryHead)}"
							id="pPayOrderQuerySearchBtn"
							value="Buscar" 
							reRender="payOrderQueryForm, payOrderQueryHeadGridPanel"
							styleClass="button"
							style="position:relative; left:10px; padding-bottom:4px; bottom:7px;"
							/>
					</div>
				</div>
				<div id="Form_Row">
					<div class="form_fields">
						<s:label for="pPayOrderQueryStatus">Estado:</s:label>
						<h:selectOneMenu
							styleClass="input"
							value="#{trnPaymentOrder.paymentOrderQueryHead.status}"
							id="pPayOrderQueryStatus" >
							<a4j:support event="onchange" />
							<f:selectItem itemValue=""/>
							<f:selectItem itemLabel="PENDIENTE" itemValue="PEND" />
							<f:selectItem itemLabel="CONFIRMADO" itemValue="CONF"/>
							<f:selectItem itemLabel="ANULADO" itemValue="ANUL"/>
							<a4j:support event="onblur" />
						</h:selectOneMenu>
						<div id="pPayOrderQueryStatusMsg" class="inactiveMsg"></div>
					</div>
				</div>
			</div>
			
		</a4j:outputPanel>
		<a4j:outputPanel id="payOrderQueryHeadGridPanel">	
				<rich:datascroller align="center" for="payOrderQueryHeadGrid"
						maxPages="15" page="#{trnPaymentOrder.scrollerPage}"
						renderIfSinglePage="false" />			   			
				<div style="clear: both;" />
				<rich:panel styleClass="table_add" rendered="#{not empty trnPaymentOrder.allpaymentOrderQueryHead}">
					<rich:dataTable id="payOrderQueryHeadGrid"
						var="row" rows="10"
						value="#{trnPaymentOrder.allpaymentOrderQueryHead}"
						rendered="#{not empty trnPaymentOrder.allpaymentOrderQueryHead}"
						rowClasses="rvgRowOne,rvgRowTwo"
						style="align:center;">
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Proveedor" /></f:facet>
							<h:outputText value="#{convertAssist.getSupplierName(row.idProv)}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Nro. Order" /></f:facet>
							<h:outputText value="#{row.voucher}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Fecha. Orden" /></f:facet>
							<h:outputText value="#{row.voucherDate}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Moneda" /></f:facet>
							<h:outputText value="#{convertAssist.getCurrencyDescById(row.idCurrency)}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Total Orden Pago" /></f:facet>
							<h:outputText value="#{row.totalPaymentOrder}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Estado" /></f:facet>
							<h:outputText value="#{row.status}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Detalle" /></f:facet>
							<a4j:commandLink id="viewDet"  
							    action="#{trnPaymentOrder.retrievePaymentOrderDet(row.id)}"
								oncomplete="#{rich:component('modalpayOrderQueryDet')}.show()"
								reRender="modalpayOrderQueryDet"
								immediate="true">
	
								<h:graphicImage id="editImg" url="/img/icons/database_table.png"
									styleClass="actionsImages" />
							</a4j:commandLink>
							<rich:toolTip value="Ver Detalle" for="viewDet" />
						</rich:column>
		
					</rich:dataTable>
				</rich:panel>
			</a4j:outputPanel>
	</a4j:form>
	
	<rich:modalPanel  id="modalpayOrderQueryDet"  minwidth="800" minheight="400" 
		resizeable="false" autosized="true" top="30">
		<f:facet name="header">
			<h:panelGroup>
			<h:outputText value="Detalle de la Compra" />
			</h:panelGroup>
		</f:facet>
		<f:facet name="controls">
			<h:panelGroup>
				<h:graphicImage value="/img/close.png" style="cursor:pointer"
					id="modalpayOrderQueryDetHide" />
				<rich:componentControl for="modalpayOrderQueryDet"
					attachTo="modalpayOrderQueryDetHide" operation="hide" event="onclick" />
			</h:panelGroup>
		</f:facet>
			<rich:panel styleClass="table_add" rendered="#{not empty trnPaymentOrder.allpaymentOrderQueryDet}">
				<rich:dataTable id="orderConfDetGrid"
						var="row" rows="10"
						value="#{trnPaymentOrder.allpaymentOrderQueryDet}"
						rendered="#{not empty trnPaymentOrder.allpaymentOrderQueryDet}"
						rowClasses="rvgRowOne,rvgRowTwo"
						style="align:center;">

						<rich:column>
							<f:facet name="header"><h:outputText value="Item" /></f:facet>
							<h:outputText value="#{row.item}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Comprobante" /></f:facet>
							<h:outputText value="#{comAssist.getInvoiceNumber(row.establishment, row.expedition, row.voucher, row.instalments)}" />
						</rich:column>
						
						<rich:column>
							<f:facet name="header"><h:outputText value="Monto" /></f:facet>
							<h:outputText value="#{row.amountOfPaymentOrden}" />
						</rich:column>
						
		
					</rich:dataTable>
			</rich:panel>
	</rich:modalPanel>
</ui:composition>